<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="lib/css/bootstrap.min.css"/>
</head>
<body ng-controller="myController">
    <div class="container">
        <div class="panel">
            <div class="panel-title">
                <div class="panel-heading"><h4>新用户注册</h4></div>
            </div>
            <div class="panel-body">
                <form name="frm" novalidate ng-submit="register()">
                    <div class="form-group">
                        <label>真实姓名</label>
                        <input class="form-control" ng-model="user.userName" name="userName" type="text" required pattern="\w{4,}"/>
                        <div ng-show="frm.userName.$dirty || isInvalid">
                            <span class="text-danger" ng-show="frm.userName.$error.required">用户名是必须的</span>
                            <span class="text-warning" ng-show="frm.userName.$error.pattern">用户名格式不正确</span>
                        </div>

                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input class="form-control" ng-model="user.userPass" name="userPass" type="password" required pattern="\w{6,}"/>
                        <div ng-show="frm.userPass.$dirty || isInvalid">
                            <span class="text-danger" ng-show="frm.userPass.$error.required">密码是必须的</span>
                            <span class="text-warning" ng-show="frm.userPass.$error.pattern">密码格式不正确</span>
                        </div>

                    </div>
                    <div class="form-group">
                        <label>确认密码</label>
                        <input class="form-control" ng-model="user.checkPass" name="checkPass" type="password" required/>
                        <span class="text-danger" ng-show="frm.checkPass.$dirty && user.userPass != user.checkPass">两次密码不一致</span>
                    </div>
                    <div class="form-group">
                        <label>手机号码</label>
                        <input class="form-control" ng-model="user.userPhone" name="userPhone" type="text" required pattern="1[3,4,5,7,8]\d{9}"/>
                        <div ng-show="frm.userPhone.$dirty || isInvalid">
                            <span class="text-danger" ng-show="frm.userPhone.$error.required">手机号码是必须的</span>
                            <span class="text-warning" ng-show="frm.userPhone.$error.pattern">手机号码格式不一致</span>
                        </div>

                    </div>
                    <button class="btn btn-primary" name="btn" type="submit">注册</button>
                </form>
            </div>
        </div>
    </div>

    <script src="lib/js/angular.min.js"></script>
    <script>
        var app = angular.module('app' ,[]);
        app.controller('myController' ,['$scope' ,function($scope){
            $scope.user = {
                userName: '',
                userPass: '',
                userPhone: '',
                checkPass: ''
            };

            $scope.isInvalid = false;
            $scope.register = function(){
                if($scope.frm.$valid){
                    console.log('success!');
                }else{
                    $scope.isInvalid = true;
                }
            };
        }]);
    </script>
</body>
</html>